<div class="animated fadeIn">

    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    3d Switch
                </div>
                <div class="card-block">
                    <label class="switch switch-3d switch-primary">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-3d switch-secondary">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-3d switch-success">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-3d switch-warning">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-3d switch-info">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-3d switch-danger">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                </div>
            </div>
        </div>
        <!--/.col-->

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    Switch default
                </div>
                <div class="card-block">
                    <label class="switch switch-default switch-primary">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-default switch-secondary">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-default switch-success">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-default switch-warning">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-default switch-info">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-default switch-danger">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                </div>
            </div>
        </div>
        <!--/.col-->

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    Switch default - pills
                </div>
                <div class="card-block">
                    <label class="switch switch-default switch-pill switch-primary">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-default switch-pill switch-secondary">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-default switch-pill switch-success">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-default switch-pill switch-warning">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-default switch-pill switch-info">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-default switch-pill switch-danger">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                </div>
            </div>
        </div>
        <!--/.col-->

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    Switch outline
                </div>
                <div class="card-block">
                    <label class="switch switch-default switch-primary-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-default switch-secondary-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-default switch-success-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-default switch-warning-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-default switch-info-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-default switch-danger-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                </div>
            </div>
        </div>
        <!--/.col-->

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    Switch outline - pills
                </div>
                <div class="card-block">
                    <label class="switch switch-default switch-pill switch-primary-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-default switch-pill switch-secondary-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-default switch-pill switch-success-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-default switch-pill switch-warning-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-default switch-pill switch-info-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-default switch-pill switch-danger-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                </div>
            </div>
        </div>
        <!--/.col-->

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    Switch outline alternative
                </div>
                <div class="card-block">
                    <label class="switch switch-default switch-primary-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-default switch-secondary-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-default switch-success-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-default switch-warning-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-default switch-info-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-default switch-danger-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                </div>
            </div>
        </div>
        <!--/.col-->

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    Switch outline alternative - pills
                </div>
                <div class="card-block">
                    <label class="switch switch-default switch-pill switch-primary-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-default switch-pill switch-secondary-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-default switch-pill switch-success-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-default switch-pill switch-warning-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-default switch-pill switch-info-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-default switch-pill switch-danger-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label"></span>
                        <span class="switch-handle"></span>
                    </label>
                </div>
            </div>
        </div>
        <!--/.col-->

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    Switch with text
                </div>
                <div class="card-block">
                    <label class="switch switch-text switch-primary">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-text switch-secondary">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-text switch-success">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-text switch-warning">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-text switch-info">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-text switch-danger">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                </div>
            </div>
        </div>
        <!--/.col-->

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    Switch with text - pills
                </div>
                <div class="card-block">
                    <label class="switch switch-text switch-pill switch-primary">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-text switch-pill switch-secondary">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-text switch-pill switch-success">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-text switch-pill switch-warning">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-text switch-pill switch-info">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-text switch-pill switch-danger">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                </div>
            </div>
        </div>
        <!--/.col-->

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    Switch with text outline
                </div>
                <div class="card-block">

                    <label class="switch switch-text switch-primary-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-text switch-secondary-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-text switch-success-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-text switch-warning-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-text switch-info-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-text switch-danger-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                </div>
            </div>
        </div>
        <!--/.col-->

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    Switch with text outline - pills
                </div>
                <div class="card-block">

                    <label class="switch switch-text switch-pill switch-primary-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-text switch-pill switch-secondary-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-text switch-pill switch-success-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-text switch-pill switch-warning-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-text switch-pill switch-info-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-text switch-pill switch-danger-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                </div>
            </div>
        </div>
        <!--/.col-->

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    Switch with text outline alternative
                </div>
                <div class="card-block">
                    <label class="switch switch-text switch-primary-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-text switch-secondary-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-text switch-success-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-text switch-warning-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-text switch-info-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-text switch-danger-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                </div>
            </div>
        </div>
        <!--/.col-->

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    Switch with text outline alternative - pills
                </div>
                <div class="card-block">
                    <label class="switch switch-text switch-pill switch-primary-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-text switch-pill switch-secondary-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-text switch-pill switch-success-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-text switch-pill switch-warning-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-text switch-pill switch-info-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-text switch-pill switch-danger-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="On" data-off="Off"></span>
                        <span class="switch-handle"></span>
                    </label>
                </div>
            </div>
        </div>
        <!--/.col-->

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    Switch with icon
                </div>
                <div class="card-block">
                    <label class="switch switch-icon switch-primary">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-icon switch-secondary">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-icon switch-success">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-icon switch-warning">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-icon switch-info">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-icon switch-danger">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                </div>
            </div>
        </div>
        <!--/.col-->

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    Switch with icon - pills
                </div>
                <div class="card-block">
                    <label class="switch switch-icon switch-pill switch-primary">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-icon switch-pill switch-secondary">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-icon switch-pill switch-success">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-icon switch-pill switch-warning">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-icon switch-pill switch-info">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-icon switch-pill switch-danger">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                </div>
            </div>
        </div>
        <!--/.col-->

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    Switch with icon outline
                </div>
                <div class="card-block">
                    <label class="switch switch-icon switch-primary-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-icon switch-secondary-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-icon switch-success-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-icon switch-warning-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-icon switch-info-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-icon switch-danger-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                </div>
            </div>
        </div>
        <!--/.col-->

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    Switch with icon outline - pills
                </div>
                <div class="card-block">
                    <label class="switch switch-icon switch-pill switch-primary-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-icon switch-pill switch-secondary-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-icon switch-pill switch-success-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-icon switch-pill switch-warning-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-icon switch-pill switch-info-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-icon switch-pill switch-danger-outline">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                </div>
            </div>
        </div>
        <!--/.col-->

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    Switch with icon outline alternative
                </div>
                <div class="card-block">
                    <label class="switch switch-icon switch-primary-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-icon switch-secondary-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-icon switch-success-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-icon switch-warning-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-icon switch-info-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-icon switch-danger-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                </div>
            </div>
        </div>
        <!--/.col-->

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    Switch with icon outline alternative - pills
                </div>
                <div class="card-block">
                    <label class="switch switch-icon switch-pill switch-primary-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-icon switch-pill switch-secondary-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-icon switch-pill switch-success-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-icon switch-pill switch-warning-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-icon switch-pill switch-info-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                    &nbsp;&nbsp;&nbsp;
                    <label class="switch switch-icon switch-pill switch-danger-outline-alt">
                        <input type="checkbox" class="switch-input" checked>
                        <span class="switch-label" data-on="&#xf00c" data-off="&#xf00d"></span>
                        <span class="switch-handle"></span>
                    </label>
                </div>
            </div>
        </div>
        <!--/.col-->

        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    Sizes
                </div>
                <div class="card-block p-0">
                    <table class="table table-hover table-striped table-align-middle mb-0">
                        <thead>
                            <th>Size</th>
                            <th>Example</th>
                            <th>CSS Class</th>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    Large
                                </td>
                                <td>
                                    <label class="switch switch-lg switch-3d switch-primary">
                                        <input type="checkbox" class="switch-input" checked>
                                        <span class="switch-label"></span>
                                        <span class="switch-handle"></span>
                                    </label>
                                </td>
                                <td>
                                    Add following class
                                    <code>.switch-lg</code>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Normal
                                </td>
                                <td>
                                    <label class="switch switch-3d switch-primary">
                                        <input type="checkbox" class="switch-input" checked>
                                        <span class="switch-label"></span>
                                        <span class="switch-handle"></span>
                                    </label>
                                </td>
                                <td>
                                    -
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Small
                                </td>
                                <td>
                                    <label class="switch switch-sm switch-3d switch-primary">
                                        <input type="checkbox" class="switch-input" checked>
                                        <span class="switch-label"></span>
                                        <span class="switch-handle"></span>
                                    </label>
                                </td>
                                <td>
                                    Add following class
                                    <code>.switch-sm</code>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Extra small
                                </td>
                                <td>
                                    <label class="switch switch-xs switch-3d switch-primary">
                                        <input type="checkbox" class="switch-input" checked>
                                        <span class="switch-label"></span>
                                        <span class="switch-handle"></span>
                                    </label>
                                </td>
                                <td>
                                    Add following class
                                    <code>.switch-sm</code>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!--/.col-->

    </div>
    <!--/.row-->
</div>
